/*
 * @Description: 包车车辆列表页
 * @Author: ziwei.ma
 * @Date: 2019-07-15 16:53:21
 * @Last Modified by: ziwei.ma
 * @Last Modified time: 2019-09-02 17:16:55
 */

<template>
  <div id="app">
    <xb-scroll
      ref="scroll"
      :useBody="useBody"
      :getListData="getListData"
      :up="up"
      v-show="showType===1"
    >
      <template v-if="!isNoData">
        <bus-item
          :busID="option.busID"
          :busIcon="option.masterPicUrlMin"
          :busName="option.busName"
          :seats="option.availableSeat"
          v-for="(option,index) in busList"
          :key="index"
        ></bus-item>
        <div class="fontsize32 flex-h flex-hc tips">更多车辆正在入驻中...</div>
      </template>
      <!-- 无数据 -->
      <no-data
        :imgSrc="require('./assets/nodata_bus.png')"
        text="暂时没有可用车辆"
        v-else
      ></no-data>
    </xb-scroll>
    <!-- 无网络 -->
    <net-error
      @click.native="afreshData"
      v-show="showType===0"
    ></net-error>
  </div>
</template>

<script>
import BusItemVue from './components/BusItem.vue'
import NoData from '../../components/NoData'
import { XBScroll } from 'vue-xb-ui-depot'
import { getBusList } from './api/api'
import NetErrorVue from '../../components/NetError'
const SHOW_DATA = 1
const NET_ERROR = 0
export default {
  components: {
    'bus-item': BusItemVue,
    'xb-scroll': XBScroll,
    'no-data': NoData,
    'net-error': NetErrorVue
  },
  data() {
    return {
      busList: [],
      useBody: false,
      up: {
        noMoreSize: 21,
        page: { size: 20 }
      },
      showType: 1,
      isNoData: false
    }
  },
  methods: {
    getListData(pageIndex, pageCapacity) {
      return getBusList(pageIndex, pageCapacity).then(res => {
        if (res.count === 0) {
          this.isNoData = true
          return { length: pageCapacity, count: 1 }
        } else {
          this.showType = SHOW_DATA
          this.busList = pageIndex === 1 ? res.list : this.busList.concat(res.list)
          return { length: pageCapacity, count: res.count }
        }
      }).catch(err => {
        if (err.error.code === 'ECONNABORTED') {
          this.showType = NET_ERROR
        }
        return { length: pageCapacity, count: 1 }
      })
    },
    afreshData() {
      this.getListData()
    }
  }
}
</script>

<style>
html,
body,
#app {
  height: 100%;
  background-color: #f2f5f6;
}
.tips {
  margin: 32px 0;
  color: #999999;
}
</style>
